import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
    Row, Col, Card, Form, Input, 
    Button, InputNumber, Modal, message, Spin, Table,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import AntiFraudVerify from '../../components/Leia/AntiFraudVerify';
import styles from './CreditReportingQueries.less';

/*
 申请管理征信查询界面
*/

const FormItem = Form.Item;
@connect(({ queries }) => ({
    queries,
    // loading: loading.models.rule,
}))
@Form.create()
export default class CreditScreening extends PureComponent {
    state = {
        addCredit: false,
        disclaimerModel: false,
        screeningDetails: false,
        id: null,
        orderNum: null,
        name: null,
    };

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'queries/fetchThirdData',
            payload: {
                offset: 0,
                limit: 10,
            },
        });
    }

    handleSearch = () => {
        this.props.dispatch({
            type: 'queries/fetchThirdData',
            payload: {
                offset: 0,
                limit: 10,
                orderNum: this.state.orderNum,
                name: this.state.name,
            },
        })
    };

    handleFormReset = () => {
        const { form, dispatch } = this.props;
        form.resetFields();
        dispatch({
            type: 'queries/fetchThirdData',
            payload: {
                offset: 0,
                limit: 10,
            },
            callback: () => {
                this.setState({
                    orderNum: null,
                    name: null,
                })
            }
        });
    }

    renderSimpleForm() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={10} sm={24}>
                        <FormItem label="订单编号">
                            {getFieldDecorator('orderNum')(
                                <Input placeholder="请输入" onChange={this.handleChangeOrderNum} />
                            )}
                        </FormItem>
                    </Col>
                    <Col md={10} sm={24}>
                        <FormItem label="客户名称">
                            {getFieldDecorator('name1')(
                                <Input placeholder="请输入" onChange={this.handleChangeName} />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <p style={{ textAlign: 'right' }} className={styles.submitButtons}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
                    </p>
                </Row>

            </Form>
        );
    }

    handleChangeOrderNum = (e) => {
        this.setState({
            orderNum: e.target.value
        })
    }

    handleChangeName = (e) => {
        this.setState({
            name: e.target.value
        })
    }

    columns = [{
        title: '订单编号',
        dataIndex: 'orderNum',
        key: 'orderNum',
    }, {
        title: '客户姓名',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '所属机构',
        dataIndex: 'merchantName',
        key: 'merchantName',
    }, {
        title: '查询人',
        dataIndex: 'createName',
        key: 'createName',
    }, {
        title: '查询时间',
        dataIndex: 'createTime',
        key: 'createTime',
    }, {
        title: '操作',
        dataIndex: 'id',
        key: 'id',
        render: (text, record) => (
            <Fragment>
                <a onClick={() => this.handleAgreenCreditScrenning(record.id)}>详情</a>
            </Fragment>
        ),
    }];

    handleAddCreditScrenning = () => {
        this.setState({ addCredit: true, })
    }

    handleAddCreditCancel = () => {
        this.setState({ addCredit: false })
    }

    handleAddCreditSubmit = () => {
        this.setState({ disclaimerModel: true })
    }

    handleAgreenCreditCancel = () => {
        this.setState({ disclaimerModel: false, addCredit: false })
    }

    handleAgreenCreditScrenning = (id) => {
        this.setState({
            addCredit: false,
            disclaimerModel: false,
            screeningDetails: true,
            id: id
        })
        const { dispatch } = this.props;
        dispatch({
            type: 'queries/fetchThirdDataDetails',
            payload: {
                id: id
            },
        });
    }

    handleThirdDataQueryAgreed = () => {
        const { dispatch } = this.props;
        const { validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((error, values) => {
            if (!error) {
                dispatch({
                    type: 'queries/fetchThirdDataCreate',
                    payload: {
                        ...values,
                    },
                    callback: () => {
                        const { queries: { thirdDataResult } } = this.props;
                        if (thirdDataResult.code == 200) {
                            this.setState({
                                addCredit: false,
                                disclaimerModel: false,
                            })
                            message.success("查询成功")
                            dispatch({
                                type: 'queries/fetchThirdData',
                                payload: {
                                    offset: 0,
                                    limit: 10,
                                },
                            });
                        } else {
                            message.error(thirdDataResult.message)
                        }
                    }
                })
            }
        });
    }

    handleFraudCancel = () => {
        this.setState({
            screeningDetails: false
        })
    }

    handleStandardTableChange = (pagination, filtersArg, sorter) => {
        const { dispatch } = this.props;
        const { formValues } = this.state;
        const filters = Object.keys(filtersArg).reduce((obj, key) => {
            const newObj = { ...obj };
            newObj[key] = getValue(filtersArg[key]);
            return newObj;
        }, {});
        const params = {
            offset: (pagination.current - 1) * pagination.pageSize,
            limit: pagination.pageSize,
            ...formValues,
            ...filters,
        };
        dispatch({
            type: 'queries/fetchThirdData',
            payload: params,
        });
    }

    render() {
        const { queries: { thirdData, thirdDataPage, loading, thirdDataDetails, thirdDataLoading, sumbitLoading } } = this.props;
        const { getFieldDecorator } = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };

        return (
            <PageHeaderLayout
                title="个人征信筛查"
            >
                {/* {JSON.stringify(thirdData)} */}
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderSimpleForm()}
                        </div>
                        <div className={styles.tableListOperator}>
                            <Button icon="plus" type="primary" onClick={this.handleAddCreditScrenning}>
                                筛查
                            </Button>
                        </div>
                        <Table
                            dataSource={thirdData}
                            columns={this.columns}
                            loading={loading}
                            pagination={thirdDataPage}
                            bordered
                            rowKey="id"
                            onChange={this.handleStandardTableChange}
                        />
                    </div>

                    <Modal
                        title="个人征信查询"
                        visible={this.state.addCredit}
                        onOk={this.handleAddCreditSubmit}
                        onCancel={this.handleAddCreditCancel}
                    // confirmLoading={confirmLoading}
                    >
                        <Form >
                            <FormItem {...formItemLayout} label="姓名">
                                {getFieldDecorator('name', {
                                    rules: [{
                                        required: true, message: '请输入姓名号',
                                    }],
                                })(
                                    <Input placeholder="请输入姓名号" />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout} label="身份证">
                                {getFieldDecorator('idCard', {
                                    rules: [{
                                        required: true, message: '请输入身份证',
                                    }],
                                })(
                                    <Input placeholder="请输入身份证" />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout} label="手机号">
                                {getFieldDecorator('mobile', {
                                    rules: [{
                                        required: true, message: '请输入手机号',
                                    }],
                                })(
                                    <InputNumber placeholder="请输入手机号" style={{ width: "100%" }} />
                                )}
                            </FormItem>
                            <FormItem {...formItemLayout} label="所属机构">
                                {getFieldDecorator('merchantName', {
                                })(
                                    <Input placeholder="请输入所属机构" />
                                )}
                            </FormItem>
                        </Form>
                    </Modal>

                    <Modal
                        title="免责条款"
                        visible={this.state.disclaimerModel}
                        onOk={this.handleThirdDataQueryAgreed}
                        onCancel={this.handleAgreenCreditCancel}
                        confirmLoading={thirdDataLoading}
                    >
                        <div style={{ textAlign: 'left' }}>
                            <p>免责条款的概念:免责条款，就是当事人以协议排除或限制其未来责任的合同条款。</p>
                            <p>其一，免责条款是合同的组成部分，是一种合同条款;</p>
                            <p>其二，免责条款的提出必须是明示的，不允许以默示方式作出，也不允许法官推定免责条款的存在。</p>
                        </div>
                    </Modal>

                    <Modal
                        title="反欺诈详情"
                        width="70%"
                        visible={this.state.screeningDetails}
                        onCancel={this.handleFraudCancel}
                        footer={null}
                    >
                        {sumbitLoading ?
                            <div className={styles.spinContainer}>
                                <Spin size="large" />
                            </div>
                            :
                            <div>
                                {!thirdDataDetails ? <div style={{ textAlign: 'center' }}>暂无数据</div> :
                                    thirdDataDetails &&
                                    <AntiFraudVerify thirdDataDetails={thirdDataDetails} id={this.state.id} />
                                }
                            </div>
                        }
                    </Modal>
                </Card>
            </PageHeaderLayout>
        );
    }
}
